import React, { useEffect, useState } from 'react'
import './App.css'

import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'

export default function App() {
    //状态提升,把数据放在App中
    //初始化todoList数据
    const [todoList, setTodoList] = useState([])

    //刚渲染App的时候,去本地存储中查看是否保存有数据
    useEffect(() => {
        console.log(1);
        setTodoList(JSON.parse(localStorage.getItem("todoList")) || [])
    }, [])

    //监听todoList 如果发生改变,则在本地中保存
    useEffect(() => {
        console.log(2);
        localStorage.setItem("todoList",JSON.stringify(todoList))
    },[todoList])


    return (
        <div className="todo-container">
            <div className="todo-wrap">
                <Header todoList={todoList} setTodoList={setTodoList} />
                <List todoList={todoList} setTodoList={setTodoList} />
                <Footer todoList={todoList} setTodoList={setTodoList} />
            </div>
        </div>
    )
}
